import React from 'react';
import Component from 'react';
import { Modal, Button } from 'antd';
import Input from "../../../Component/Input/Input";
import {Row, Col, Icon} from "antd";
import Logo from '../../../Common/svg/Logo';
import RoundButton from "../../../Component/RoundButton/RoundButton";
import SvgPhone from "../../../Common/svg/LoginPhone";
import "../Common/index.css";
import LoginLock from '../../../Common/svg/LoginLock';
import Blank from '../../Blank';
import "../../../Common/css/common.css";
import "../ChangePsw/index.css";

export default class VerifyPhone extends React.Component {
    constructor(props){
      super();
      this.state = {
        visible: true,
      };
    }
    showModal = () => {
      this.setState({
        visible: true,
      });
    };
  
    handleOk = () => {
      this.setState({ loading: true });
      setTimeout(() => {
        this.setState({ loading: false, visible: false });
      }, 3000);
    };
  
    handleCancel = () => {
      this.setState({ visible: false });
    };
      render() {
        return (
            <div>
              <Button type="primary" onClick={this.showModal}>
                  Open Modal with customized footer
              </Button>
              <Modal
                visible={this.state.visible}
                title="验证手机"
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                footer={null}
              >
                <div className="Modal_Content_Out">
                <div className="Modal_Content_Desc">
                    <span>*</span>
                    <span>如果您忘记登录密码，可以在本页面重置登录密码，<br/>后续可通过手机号+登录密码登录Fly派。</span>
                </div>
                <br/>
                <div>
                    <Logo width="133" height="99"/>
                </div>
                <Row className="Modal_Content_Phone">
                    <Input
                        type={"plain"}
                        placeholder={"手机号"}
                        prefix={<Icon component={SvgPhone}/>}
                        autoComplete={"username"}
                    />
                </Row>
                <Row className="Modal_Content_Phone">
                    <Input
                        type={"plain"}
                        placeholder={"请输入新密码"}
                        prefix={<Icon component={LoginLock}/>}
                        autoComplete={"username"}
                    />
                </Row>
                <Row className="Modal_Content_Phone">
                    <Input
                        type={"plain"}
                        placeholder={"再次确认新密码"}
                        prefix={<Icon component={LoginLock}/>}
                        autoComplete={"username"}
                    />
                    <div className="ChangePsw_Info">
                        <span className="ChangePsw_Info_Star">*</span>
                        <span>6-20个字符，必须包含字母和数字</span>
                    </div>
                </Row>
                <Row className={"Login_Button"}>
                    <RoundButton text={"提交"}/>
                </Row>
                
              </div>
              </Modal>
            </div>
        );
      }
  }